<template>
  <div>
    <!--    编写页面静态部分，即view部分-->

    <!--查询表单-->
    <el-form :model="params" style="padding-top: 10px">
      <el-select v-model="params.siteId" placeholder="请选择站点">   <!--v-model:支持双向绑定数据-->
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId">
        </el-option>
      </el-select>
      页面名称:
      <el-input v-model="params.pageName" style="width:100px"></el-input>
      页面别名：
      <el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      <el-select v-model="params.pageType" placeholder="请选择页面类型">
        <el-option
          v-for="item in pageTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" v-on:click="query" size="small">查询</el-button>
      <!--vue渲染的a标签,:to标签指定访问的url，query指定url带的参数-->
      <router-link class="mui-tab-item"
                   :to="{path:'/cms/page/add',query:{page:this.params.page,siteId:this.params.siteId}}">
        <el-button type="primary" size="small">新增</el-button>
      </router-link>
    </el-form>

    <!--表格加载-->
    <el-table :data="list" style="width: 100%">   <!--绑定表格数据list,:是v-bind的简写-->
      <el-table-column type="index" width="70">
      </el-table-column>
      <el-table-column prop="pageName" label="页面名称" width="200">
      </el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="120">
      </el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.pageType == '0'">静态</span>
          <span v-else>动态</span>
        </template>
      </el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="220">
      </el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="150">
      </el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间" width="200" :formatter="formatCreatetime">
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="page">
          <el-button size="small" type="text" @click="edit(page.row.pageId)">编辑</el-button>
          <el-button size="small" type="text" @click="del(page.row.pageId)">删除</el-button>
          <el-button size="small" type="text" @click="preview(page.row.pageId)">页面预览</el-button>
          <el-button size="small" type="text" @click="postPage(page.row.pageId)">页面发布</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    &lt;!&ndash;分页属性设置&ndash;&gt;-->
    <!--    <el-pagination-->
    <!--      layout="prev, pager, next"-->
    <!--      :total="total"-->
    <!--      :page-size="params.size"-->
    <!--      :current-page="params.page"-->
    <!--      @current-change="changePage"-->
    <!--      style="float:right">-->
    <!--    </el-pagination>-->

    <el-pagination
      background
      @size-change="changeSize"
      @current-change="changePage"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      style="float:right">
    </el-pagination>

    <!--    v-on: 简写 @  v-bind 简写 ：          -->
  </div>
</template>

<script>
    /*编写页面静态部分，即model及vm部分。*/
    //导入接口api中的所有接口
    import * as cmsApi from '../api/cms'
    import utilApi from '@/common/utils';

    import Template_list from "./template_list";

    //导出默认的VM
    export default {
        components: {Template_list},
        //View层数据的加载，即为Model层
        data() {
            return {
                siteList: [],
                list: [],
                pageTypeList: [{value: '0', label: '静态'}, {value: '1', label: '动态'}], //pageType的下拉框数据
                total: 0,
                params: {
                    page: 1,       //设置页码
                    size: 10,       //设置每页展示数据个数
                    siteId: '',      //站点id
                    pageAliase: '',   //页面别名
                    pageName: '',      //页面名称
                    pageType: ''         //页面类型
                }
            }
        },
        //View层调用方法的实现
        methods: {
            //格式化日期
            formatCreatetime(row, column) {
                var createTime = new Date(row.pageCreateTime);
                if (createTime) {
                    return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss');
                }
            },
            //分页查询方法
            query: function () {
                //调用导入的cmsApi接口里的方法获取数据
                cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
                    //ajax请求成功之后的回调方法,为参数赋值
                    this.list = res.queryResult.list;
                    this.total = res.queryResult.total
                })
            },
            //页码改变调用该方法
            changePage: function (page) {
                //更改页码
                this.params.page = page;
                this.query();
            },
            //每页显示数据改变调用方法
            changeSize: function (size) {
                //更改页面显示数据
                this.params.size = size;
                this.query();
            },
            //查询站点列表
            querySite: function () {
                cmsApi.site_list().then((res) => {
                    this.siteList = res.queryResult.list;
                })
            },
            //编辑按钮调用的方法
            edit: function (pageId) {
                //设置路由
                this.$router.push({
                    path: '/cms/page/edit' + pageId,
                    //设置路由携带的参数，实现修改页面的返回
                    query: {
                        page: this.params.page,
                        siteId: this.params.siteId
                    }
                });
            },
            //删除按钮调用的方法
            del: function (pageId) {
                this.$confirm('确认删除此页面吗？', '提示', {}).then(() => {
                    cmsApi.page_delete(pageId).then((res) => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //删除成功之后调用查询方法，重新加载表格数据
                            this.query();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    });
                });
            },
            //页面预览调用的方法
            preview: function (pageId) {
                //打开url，请求服务端获取静态化页面的方法
                window.open("http://www.sfs.com/cms/preview/" + pageId);
            },
            //页面发布调用的方法
            postPage: function (pageId) {
                this.$confirm('确认发布此页面吗?', '提示', {}).then(() => {
                    cmsApi.post_page(pageId).then((res) => {
                        if (res.success) {
                            console.log('发布页面id=' + pageId);
                            this.$message.success('发布成功,请稍后查看结果');
                        } else {
                            this.$message.error('发布失败');
                        }
                    });
                });
            }
        },
        //使用钩子方法,实现页面加载完成但是未开始渲染时调用方法
        created() {
            //从url中获取参数page，在页面加载时赋值，若值为空，默认赋值为1
            this.params.page = Number.parseInt(this.$route.query.page || 1);
            //从url中获取参数siteId，判断若为false，则默认赋值为''
            this.params.siteId = this.$route.query.siteId || '';
        },
        //使用钩子方法,实现页面渲染完成之后调用方法
        mounted() {
            //mounted()方法是在dom元素渲染完成之后，调用query()方法
            this.query();
            this.querySite();
        }
    }
</script>

<style>
  /*编写页面样式，不是必须*/
</style>
